<template>
  <view id="home">
    <zk-navigationBar bgcolor="" />
    <view id="header">
      <zk-headerBar ref="headerBar" />
    </view>
    <view id="content">
      <view id="sidebar">
        <zk-homeSidebar />
      </view>
      <view id="main">
        <view v-if="useActiveStore.activePage === 'home'" class="main_content">
          <zk-workbench />
        </view>
        <view
          class="main_content"
          v-if="
            useActiveStore.activePage == 'InventoryManagement' ||
            useActiveStore.activePage == 'ApprovalManagement' ||
            useActiveStore.activePage == 'LossReportedManagement' ||
            useActiveStore.activePage == 'ApprovalHistory' ||
            useActiveStore.activePage == 'LossReportingApproval'
          ">
          <zk-glspModel></zk-glspModel>
        </view>
        <!-- 统计 -->
        <view
          class="main_content"
          v-if="useActiveStore.activePage === 'Materialview'">
          <zk-statistics></zk-statistics>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useActivePageStore } from "@/stores/modules/activePage";
import { useMemberStore } from "@/stores/modules/member";
import { useHomeStore } from "@/stores/modules/home";
const homeStore = useHomeStore();
const userStore = useMemberStore();
const useActiveStore = useActivePageStore();
const headerBar: any = ref(null);

onMounted(() => {
  if (homeStore.openStashDrawer) {
    console.log("open stash drawer", headerBar.value);
    headerBar.value.openDrawer();
    setTimeout(() => {
      homeStore.openStashDrawer = false;
    }, 300);
  }
  if (!userStore.user_id) {
    uni.reLaunch({
      url: "/pages/login/login",
    });
  }
});
const height = uni.getStorageSync("contentHeight");
</script>

<style lang="scss">
#home {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  background-image: url("~@/static/img/home/bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  #header {
    height: 58px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #content {
    height: 470px;
    display: flex;
    justify-content: space-between;
    #sidebar {
      height: 100%;
      width: 10%;
    }
    #main {
      height: 100%;
      width: 90%;
      .main_content {
        height: 100%;
        width: 100%;
        padding: 0px 20px 10px;
      }
    }
  }
}
</style>
